tabbar {
  .box {
    background-color: $headerbar_bg_color;
    color: $headerbar_fg_color;
    box-shadow: inset 0 -1px $headerbar_border_color;
    padding: 1px;
    padding-top: 0;

    &:backdrop {
      background-color: $headerbar_backdrop_color;
      transition: background-color $backdrop_transition;

      > scrolledwindow,
      > .start-action,
      > .end-action {
        filter: opacity(0.5);
        transition: filter $backdrop_transition;
      }
    }
  }

  tabbox {
    padding-bottom: $base_padding;
    padding-top: $base_padding;
    min-height: $medium_size;

    > tabboxchild {
      @include focus-ring($focus-state: ':focus-within:focus-visible');
      border-radius: $button_radius;
    }

    > separator {
      margin-top: 5px;
      margin-bottom: 5px;
      transition: opacity 150ms ease-in-out;

      &.hidden {
        opacity: 0;
      }
    }

    > revealer > indicator {
      min-width: 2px;
      border-radius: 2px;
      margin: $base_padding / 2 $base_padding;
      background: gtkalpha($accent_color, 0.5);
    }
  }

  tab {
    transition: background 150ms ease-in-out;

    &:selected {
      background-color: $selected_color;

      &:hover { background-color: $selected_hover_color; }
      &:active { background-color: $selected_active_color; }
    }

    &:hover { background-color: $hover_color; }
    &:active { background-color: $active_color; }
  }

  tabbox.single-tab tab {
    &, &:hover, &:active {
      background: none;
    }
  }

  .start-action,
  .end-action {
    padding: $base_padding;
  }

  .start-action:dir(ltr),
  .end-action:dir(rtl) {
    padding-right: 0;
  }

  .start-action:dir(rtl),
  .end-action:dir(ltr) {
    padding-left: 0;
  }

  &.inline {
    @extend %tabbar-inline;
  }
}

%tabbar-inline .box {
  background-color: transparent;
  color: inherit;
  box-shadow: none;
  padding-bottom: 0;

  &:backdrop {
    background-color: transparent;
    transition: none;

    > scrolledwindow,
    > .start-action,
    > .end-action {
      filter: none;
      transition: none;
    }
  }
}

%tabbar-shrunk {
  tabbox,
  .start-action,
  .end-action {
    padding-top: 0;
    padding-bottom: $base_padding;
  }
}

dnd tab {
  background-color: $headerbar_bg_color;
  background-image: image($selected_active_color);
  color: $headerbar_fg_color;

  box-shadow: 0 0 0 1px transparentize(black, 0.97),
              0 1px 3px 1px transparentize(black, .93),
              0 2px 6px 2px transparentize(black, .97);

  margin: 25px;
}

tabbar,
dnd {
  tab {
    min-height: 24px;
    padding: ($medium_size - 24px) / 2;
    border-radius: $button_radius;

    button.image-button {
      padding: 0;
      margin: 0;
      min-width: $small_size;
      min-height: $small_size;
      border-radius: $circular_radius;
    }

    indicator {
      min-height: 2px;
      border-radius: 2px;
      background: gtkalpha($accent_color, 0.5);
      transform: translateY(4px);
    }
  }
}

tabgrid > tabgridchild {
  @include focus-ring(".card", $offset: 0, $outer: true);
}

tabthumbnail {
  border-radius: $card_radius + 4px;

  > box {
    margin: $base_padding;
  }

  &:drop(active) {
    box-shadow: inset 0 0 0 2px gtkalpha($drop_target_color, .4);
    background-color: gtkalpha($drop_target_color, .1);
  }

  transition: box-shadow 200ms $ease-out-quad, background-color $ease-out-quad;

  .needs-attention {
    &:dir(ltr) { transform: translate(8px, -8px); }
    &:dir(rtl) { transform: translate(-8px, -8px); }

    > widget {
      background: $accent_color;
      min-width: 12px;
      min-height: 12px;
      border-radius: 8px;
      margin: $base_padding / 2;
      box-shadow: 0 1px 2px gtkalpha($accent_color, .4);
    }
  }

  .card {
    picture {
      outline: 1px solid $window_outline_color;
      outline-offset: -1px;
      border-radius: $card_radius;
    }

    background: none;
    color: inherit;
  }

  &.pinned .card {
    background-color: $thumbnail_bg_color;
    color: $thumbnail_fg_color;
  }

  .icon-title-box {
    border-spacing: $base_padding;
  }

  .tab-unpin-icon {
    margin: $base_padding;
    min-width: 24px;
    min-height: 24px;
  }

  button.circular {
    margin: $base_padding;
    background-color: gtkalpha($thumbnail_bg_color, .75);
    min-width: 24px;
    min-height: 24px;

    &:hover {
      background-color: gtkalpha(gtkmix($thumbnail_bg_color, currentColor, 90%), .75);
    }

    &:active {
      background-color: gtkalpha(gtkmix($thumbnail_bg_color, currentColor, 80%), .75);
    }
  }
}

taboverview > .overview  .new-tab-button {
  margin: 18px;
}

tabview:drop(active),
tabbox:drop(active),
tabgrid:drop(active) {
  box-shadow: none;
}
